<script setup>
import { ref } from 'vue'
import { renderLine } from '@/assets/js/chartUtils'
import { formatStamp } from '@/assets/js/utils'
import { getAllAlarmData, getAllMessageData } from '@/assets/api/api'
const props = defineProps({
    type: {
        type: String,
        default: 'alarm',
    },
    title: {
        type: String,
        default: '告警数量',
    },
    deviceClassify: {
        type: String,
        default: '',
    },
    deviceClass: {
        type: String,
        default: '',
    },
})
//
// 告警统计
import timeFilter from '@/components/timeFilter.vue'
const dateRange = ref([
    formatStamp(+new Date(), 'yyyy-MM-dd 00:00:00'),
    formatStamp(+new Date(), 'yyyy-MM-dd hh:mm:ss'),
])
const timeType = ref('天')
const lineDataLoading = ref(false)
function onTimeChange(timeRange, type) {
    dateRange.value = timeRange
    if (type == '天') {
        dateRange.value[0] = formatStamp(+new Date(), 'yyyy-MM-dd 00:00:00')
    }
    timeType.value = type
    getLineChartData()
}
const chartElem = ref(null)
function getAlarmData() {
    lineDataLoading.value = true
    const params = {
        type: timeType.value == 'custom' ? '' : timeType.value,
        startTime: dateRange.value[0],
        endTime: dateRange.value[1],
    }
    if (props.deviceClassify) {
        params.deviceClassify = props.deviceClassify
    }
    if (props.deviceClass) {
        params.deviceClass = props.deviceClass
    }
    getAllAlarmData(params)
        .then((res) => {
            lineDataLoading.value = true
            const chartData = res.data
            const xData = []
            const yData = []
            chartData.forEach((item) => {
                let time = Object.keys(item)[0]
                if (time.split('-').length < 2) {
                    time = time + ':00'
                }
                const value = Object.values(item)[0]
                xData.push(time)
                yData.push(value)
            })
            renderLine(
                chartElem.value,
                [
                    {
                        name: '告警统计',
                        valueList: yData,
                    },
                ],
                {
                    xData: xData,
                }
            )
        })
        .catch(() => {
            lineDataLoading.value = false
        })
}
function getMessageData() {
    lineDataLoading.value = true
    getAllMessageData({
        type: timeType.value == 'custom' ? '' : timeType.value,
        startTime: dateRange.value[0],
        endTime: dateRange.value[1],
    })
        .then((res) => {
            lineDataLoading.value = true
            const chartData = res.data
            const xData = []
            const yData = []
            chartData.forEach((item) => {
                let time = Object.keys(item)[0]
                if (time.split('-').length < 2) {
                    time = time + ':00'
                }
                const value = Object.values(item)[0]
                xData.push(time)
                yData.push(value)
            })
            renderLine(
                chartElem.value,
                [
                    {
                        name: '消息数量',
                        valueList: yData,
                    },
                ],
                {
                    xData: xData,
                }
            )
        })
        .catch(() => {
            lineDataLoading.value = false
        })
}
function getLineChartData() {
    if (props.type == 'message') {
        getMessageData()
    } else {
        getAlarmData()
    }
}
getLineChartData()
defineExpose({ getLineChartData })
</script>
<template>
    <div class="d-flex">
        <h4 class="d-flex-1">{{ title }}</h4>
        <div>
            <timeFilter @change="onTimeChange" />
        </div>
    </div>
    <div ref="chartElem" class="chart-wrap"></div>
</template>
<style lang="scss" scoped>
.chart-wrap {
    height: 100%;
}
</style>
